<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			/*     1     */
			/*		 
			 * 当元素（或在其内的任意元素）获得焦点时发生 focusin 事件。
			 * 当在元素或在其内的任意元素上发生 focus 事件时，focusin() 方法添加要运行的函数。
			 * 与 focus() 方法不同的是，focusin() 方法在任意子元素获得焦点时也会触发。
			 * 提示：当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
			 * 提示：该方法通常与 focusout() 方法一起使用。*/
			/*$(document).ready(function() {
				$("input").focus(function() {
					$("span").css("display", "inline").fadeOut(2000);
				});
				$("div").focusin(function() {
					$(this).css("background-color", "#FFFFCC");
				});
				$("div").focusout(function() {
					$(this).css("background-color", "#FFFFFF");
				});
			});*/
			/*    2    */
			/*
			 * hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
			 * jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。
			 * jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。*/
			/*$(document).ready(function() {
				$("p").hover(function() {
					$("p").css("background-color", "yellow");
				}, function() {
					$("p").css("background-color", "pink");
				});
			});*/
			/*    3    */
			/*
			 * 与 keydown 事件相关的事件顺序：
			 * keydown - 键按下的过程
			 * keypress - 键被按下
			 * keyup - 键被松开
			 * 当键盘键被按下时发生 keydown 事件。
			 * keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。
			 * 提示：请使用 event.which 属性来返回哪个键盘键被按下。
			 */
			/*i=0;
			$(document).ready(function() {
				$("input").keypress(function() {
					$("span").text(i += 1);
				});
				$("input").keydown(function() {
					$("input").css("background-color", "yellow");

				$("input").keyup(function() {
					$("input").css("background-color", "pink");
				});

			});*/

			/*    4    */
			/*
			 * 当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件。
			 * mousedown() 方法触发 mousedown 事件，或添加当发生 mousedown 事件时运行的函数。
			 * 提示：该方法通常与 mouseup() 方法一起使用。
			 */
			/*$(document).ready(function() {
				$("div").mouseup(function() {
					$(this).after("<p style='color:green;'>释放鼠标按钮。</p>");
				});
				$("div").mousedown(function() {
					$(this).after("<p style='color:purple;'>按下鼠标按钮。</p>");
				});
			});*/

			/*    5    */
			/*
			 * 当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。
			 * mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。
			 * 注意：与 mouseover 事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发。参见页面底部演示实例。
			 * 提示：该事件通常与 mouseleave 事件一起使用。
			 */
			/*$(document).ready(function() {
				$("p").mouseenter(function() {
					$("p").css("background-color", "yellow");
				});
				$("p").mouseleave(function() {
					$("p").css("background-color", "lightgray");
				});
			});*/

			/*    6    */
			/*
			 * 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
			 * mousemove() 方法触发 mousemove 事件，或添加当发生 mousemove 事件时运行的函数。
			 * 注意：用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。
			 */
			/*$(document).ready(function() {
				$(document).mousemove(function(event) {
					$("span").text(event.pageX + ", " + event.pageY);
				});
			});*/

			/*     7    */
			/*
			 * 当鼠标指针离开被选元素时，会发生 mouseout 事件。
			 * mouseout() 方法触发 mouseout 事件，或添加当发生 mouseout 事件时运行的函数。
			 * 注意：与 mouseleave 事件不同，mouseout 事件在鼠标指针离开被选元素或任意子元素时都会被触发，mouseleave 事件只有在鼠标指针离开被选元素时被触发。参见页面底部演示实例。
			 * 提示：该事件通常与 mouseover 事件一起使用。
			 */
			/*$(document).ready(function() {
				$("p").mouseover(function() {
					$("p").css("background-color", "yellow");
				});
				$("p").mouseout(function() {
					$("p").css("background-color", "lightgray");
				});
			});*/
		</script>
	</head>

	<body>
		<!--1-->
		<!--<input>
		<span>请输入你的电话号码?</span>
		<p>点击输入框获取焦点。</p>
		<div style="border: 1px solid black;padding:10px;">
			First name: <input type="text"><br> Last name: <input type="text">
		</div>

		<p>点击输入框获取焦点，点击输入框外的部分失去焦点。</p>-->

		<!--2-->
		<!--<p>鼠标移动到该段落。</p>-->

		<!--3-->
		<!--输入你的名字: <input type="text">
		<p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
		<p>按键的次数: <span>0</span></p>-->

		<!--4/5-->
		<div>在这个 div 元素中按下和释放鼠标按钮。</div>
			<p>鼠标移动到该段落。</p>
		<p>鼠标移动到该段落。</p>

		<!--6-->
		<!--<p>鼠标指针的坐标是: <span></span>.</p>-->

		<!--7-->
		<!--<p>鼠标移动到这个段落上。</p>
		<p>在这个 div 元素中按下和释放鼠标按钮。</p>-->

	</body>

</html>